<template>
  <section class="home">
    <mt-header title="书架">
      <mt-button slot="left" @click="sliderVisible=true">
        <i class="fa fa-bars"></i>
      </mt-button>
    </mt-header>
    <div class="mint-searchbar">
      <div class="mint-searchbar-inner">
        <input type="search" placeholder="关键字搜索" class="mint-searchbar-core" v-model.trim="searchValue" @keyup.enter="search"></div>
      <a class="mint-searchbar-cancel" @click="search">搜索</a>
    </div>
    <div class="content">
      <mt-loadmore :top-method="loadTop" :bottom-method="loadBottom" :bottom-all-loaded="allLoaded" ref="loadmore" :autoFill="false">
        <div class="box">
          <div class="book" v-for="(b,index) in books" :key="index" @click="$router.push({name:'book',params:{id:b.id}})">
            <div class="img" :style="{backgroundImage:'url(file/download?filId='+b.img+')'}"></div>
            <div class="info">
              <b>{{b.bookname}}</b>
              <p class="text-light remark">{{b.remark}}</p>
              <p class="text-light">分类：{{b.typeName}}</p>
              <p class="text-light">作者：{{b.author}}</p>
              <p class="text-light">{{b.isbn}}</p>
            </div>
          </div>
          <div class="no-result" v-if="books.length===0">
            <span>没有找到相关图书</span>
          </div>
        </div>
      </mt-loadmore>
    </div>
    <slider :visible.sync="sliderVisible"></slider>
    <mt-actionsheet :actions="actions" v-model="sheetVisible"></mt-actionsheet>
  </section>
</template>

<script>
import Slider from '@/components/slider'
export default {
  name: '',
  data() {
    return {
      books: [
        // {
        //     "id": 1,
        //     "bookname": "how to be a 程序猿",
        //     "isbn": "？？？",
        //     "img": "https://img3.doubanio.com/lpic/s1953384.jpg",
        //     "author": "lxt",
        //     "remark": "备注信息备注信息备注信息备注信息备注信息",
        //     "submitUserId": "2",
        //     "submitUserName": "aaa",
        //     "typeId": "1",
        //     "typeCode": "1",
        //     "state": "checkIn"
        // }
      ],
      allLoaded: false,
      sliderVisible: false,
      page: 0,
      sheetVisible: false,
      actions: [{
        name: '书名',
        value: 'bookname',
        method: this.selSearchType
      }, {
        name: '作者',
        value: 'author',
        method: this.selSearchType
      }],
      searchValue: '',
      searchKey: ''
    }
  },
  methods: {
    getBooks() {
      let params = {
        bookname: '',
        isbn: '',
        author: '',
        typeId: '',
        typeCode: '',
        state: '',
        submitUserId: '',
        page: this.page,
        // size: 3
      }
      this.searchValue && (params[this.searchKey] = this.searchValue)
      this.$http.postParams('/book/list', params).then((data) => {
        if (data.code === 0) {
          if (data.data.first) {
            this.books = data.data.content
          } else {
            this.books = this.books.concat(data.data.content)
          }
          this.allLoaded = data.data.last
        } else {
          Toast('密码错误')
        }
      })
    },
    loadTop() {
      this.page = 0
      this.getBooks()
      this.$refs.loadmore.onTopLoaded();
    },
    loadBottom() {
      this.page++
      this.getBooks()
      this.$refs.loadmore.onBottomLoaded();
    },
    selSearchType(result) {
      this.sheetVisible = false;
      this.searchKey = result.value
      this.getBooks()
    },
    search() {
      if (this.searchValue) {
        this.sheetVisible = true
      } else {
        this.getBooks()
      }
    }
  },
  watch: {},
  components: { Slider },
  mounted() {
    this.getBooks()
  }
}
</script>

<style lang="less">
@import "../assets/less/app.variable.less";

.home {
  .content{
    height: calc(~"100vh - 40px - 44px");
  }
  .box {
    min-height: calc(~"100vh - 40px - 44px");
  }
  .no-result {
    padding: 15px;
    display: flex;
    justify-content: center;
    align-items: center;
    height: calc(~"100vh - 40px - 44px");
    font-size: 20px;
    color: @textLighten;
  }
  .book {
    display: flex;
    padding: 10px;
    background-color: #fff;
    &:nth-child(n + 1) {
      border-bottom: 1px solid @borderColor;
    }
    .img {
      background-repeat: no-repeat;
      background-size: cover;
      width: 100px;
      height: 144px;
    }
    .info {
      flex: 1;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      padding-left: 10px;
    }
    .remark {
      display: -webkit-box;
      /*! autoprefixer: off */
      -webkit-box-orient: vertical;
      /* autoprefixer: on */
      -webkit-line-clamp: 2;
      overflow: hidden;
    }
  }
}
</style>
